<template>
  <div class="home">
    <top-module bgColor="#FF7CB6">
      <div slot="center" class="title">
        蘑菇街
      </div>
    </top-module>
    <!-- 走马灯 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item,index) in banner" :key="index">
            <img :src="item.image" alt="">
      </van-swipe-item>
    </van-swipe>
    <!-- 商品小导航 -->
    <ul class="ulNav">
          <li v-for="item in imgNav" :key="item.sort">
                <img :src="item.image" alt="">
                <p>{{item.title}}</p>
          </li>
    </ul>
    <!-- 本周流行 -->
    <div class="weekFashion">
          <img src="/img/home/recommend_bg.jpg" alt="">
    </div>
    <!-- 三切的导航 -->
    <div class="threeNav">
          <three-nav></three-nav>
    </div>
    <!-- 底部切换 -->
    <bottom-module></bottom-module>
    <img src="/img/common/top.png" class="topImg" alt="">
  </div>
</template>

<script>
// 组件
import topModule from "../../components/commonality/topModule.vue";//头部
import BottomModule from '../../components/commonality/bottomModule.vue';//底部
import ThreeNav from '../../components/commonality/threeNav.vue';//三切导航
// 引入首页数据
import {homeData} from "@/netWork/api/index.js" 



export default {
  name: "home",
  components: { topModule, BottomModule, ThreeNav },
  data() {
        return {
              banner: [],//走马灯
              imgNav:[],//商品小导航
             
        }
  },
  mounted(){
        homeData().then((res)=>{
      //     console.log(res);
              this.banner=res.data.data.banner.list
              this.imgNav=res.data.data.recommend.list
              
        })
  },
  methods:{

  },
};
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  margin-bottom: 80px;
  .topImg{
        width: 50px;
        height: 50px;
        position: fixed;
        bottom: 80px;
        right: 10px;
        z-index: 50;
  }
  .title {
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-weight: 700;
    font-size: 22px;
  }
  .van-swipe{
        margin-top: 50px;
        width: 100%;
        img{
              width: 100%;
        }
  }
  .ulNav{
        width: 100%;
        display: flex;
        border-bottom: solid #ccc 10px;
        li{
              flex: 1;
              padding: 18px;
              text-align: center;
              img{
                    width: 100%;
              }
        }
  }
  .weekFashion{
        width: 100%;
        img{
              width: 100%;

        }
  }
}
</style>